<html>
<head>
    <script src="js/jquery-3.2.0.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" >
    <link rel="stylesheet" href="css/bootstrap-theme.css" >
    <link rel="stylesheet" href="css/buttons.css">
    <script src="js/bootstrap.js" ></script>
    <script type="text/javascript" src="deleteData.js"></script>
    <script type="text/javascript" src="editData.js"></script>
    <script type="text/javascript" src="modal.js"></script>
    <script type="text/javascript" src="insertData.js"></script>
</head>

<body>
<div class="container-fluid">
    <ul class="nav nav-pills" id="nav-list" >
    <li >
        <a href="index.php" id="menu-prediction" >预测</a>
    </li>
    <li class="active">
        <a href="indexData.php" id="menu-data"  >数据</a>
    </li>
</ul>
    <!--------------------------添加/修改信息的弹出层---------------------------->
    <div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">
                        <i class="icon-pencil"></i>
                        <span id="lblAddTitle" style="font-weight:bold">编辑信息</span>
                    </h4>
                </div>
                <form class="form-horizontal form-bordered form-row-strippe" id="ffAdd" action="" data-toggle="validator" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">id</label>
                                    <div class="col-md-10">
                                        <input id="Eid" disabled="disabled" name="Name" type="text" class="form-control" placeholder="id..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Age</label>
                                    <div class="col-md-10">
                                        <input id="Eage" name="Name" type="text" class="form-control" placeholder="Age..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Sex</label>
                                    <div class="col-md-10">
                                        <input id="Esex" name="Name" type="text" class="form-control" placeholder="Sex..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Region</label>
                                    <div class="col-md-10">
                                        <input id="Eregion" name="Name" type="text" class="form-control" placeholder="Region..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Income</label>
                                    <div class="col-md-10">
                                        <input id="Eincome" name="Name" type="text" class="form-control" placeholder="Income..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Married</label>
                                    <div class="col-md-10">
                                        <input id="Emarried" name="Name" type="text" class="form-control" placeholder="Married..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Car</label>
                                    <div class="col-md-10">
                                        <input id="Ecar" name="Name" type="text" class="form-control" placeholder="Car..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Mortgage</label>
                                    <div class="col-md-10">
                                        <input id="Emortgage" name="Name" type="text" class="form-control" placeholder="Mortgage..." />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Buy</label>
                                    <div class="col-md-10">
                                        <input id="Ebuy" name="Name" type="text" class="form-control" placeholder="Buy..." />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <input type="hidden" id="ID" name="ID" />
                        <button type="submit" class="btn blue" onclick="editFun(document.getElementById('Eid').value)">确定</button>
                        <button type="button" class="btn green" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--------------------------添加/修改信息的弹出层---------------------------->
<?php
$mysql_server_name='182.254.219.244:3306'; //改成自己的mysql数据库服务器

$mysql_username='mldb'; //改成自己的mysql数据库用户名

$mysql_password='mldbtest'; //改成自己的mysql数据库密码

$mysql_database='mldb'; //改成自己的mysql数据库名

$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ; //连接数据库

mysql_select_db($mysql_database); //打开数据库
mysql_query("set names utf8");
//获取数据的行数
$lenght=10;
$all=mysql_num_rows(mysql_query("select * from ComputerBuy"));
//定义分页所需的参数
//每页显示的数量
@$page=$_GET['page']?$_GET['page']:1;    //当前页
$offset=($page-1)*$lenght;              //每页起始行编号
$allpage=ceil($all/$lenght);            //所有的页数-总数页
$prepage=$page-1;                       //上一页
if($page==1){
    $prepage=1;                         //特殊的是当前页是1时上一页就是1
}
$nextpage=$page+1;
if($page==$allpage){
    $nextpage=$allpage;                //特殊的是最后页是总数页时下一页就是总数页
}
$sql="select * from ComputerBuy order by id limit {$offset},{$lenght}";
$rest=mysql_query($sql);

//echo "SQL语句：".$sql."<br/>";
echo "<legend>数据</legend>";
echo "<table class='table table-hover'>";
echo "<tr/>";
echo "<th>Id</th>";
echo "<th>Age</th>";
echo "<th>Sex</th>";
echo "<th>Region</th>";
echo "<th>Income</th>";
echo "<th>Married</th>";
echo "<th>Car</th>";
echo "<th>Mortgage</th>";
echo "<th>Buy</th>";
echo "<th>编辑</th>";
echo "<th>删除</th>";
echo "<tr/>";
while($detail=mysql_fetch_row($rest)){
// echo "<pre>";
//print_r($detail);
// echo "</pre>";
    echo "<tr/>";
    echo "<td>$detail[0]</td>";
    echo "<td>$detail[1]</td>";
    echo "<td>$detail[2]</td>";
    echo "<td>$detail[3]</td>";
    echo "<td>$detail[4]</td>";
    echo "<td>$detail[5]</td>";
    echo "<td>$detail[6]</td>";
    echo "<td>$detail[7]</td>";
    echo "<td>$detail[8]</td>";
    echo "<td><a data-toggle='modal' href='#add' onclick='addId($detail[0])'>编辑 </a></td>";
    echo "<td><a href='#' onclick='deleteFun($detail[0])'> 删除</a></td>";
    echo "<tr/>";
}
echo "<tr/>";
echo "<td></td>";
echo "<td><input size='1' id='Iage'/></td>";
echo "<td><input size='1' id='Isex'/></td>";
echo "<td><input size='8' id='Iregion'/></td>";
echo "<td><input size='6' id='Iincome'/></td>";
echo "<td><input size='1' id='Imarried'/></td>";
echo "<td><input size='1' id='Icar'/></td>";
echo "<td><input size='1' id='Imortgage'/></td>";
echo "<td><input size='1' id='Ibuy'/></td>";
echo "<td>对应输入后</td>";
echo "<td><a href='#' onclick='insertFun()'>插入</a></td>";
echo "<tr/>";
mysql_close();
echo "</table>";

echo "<center><a href='indexData.php?page=1'>首页 | </a>";
echo "<a href='indexData.php?page={$prepage}'>上一页</a> | ";
echo "<a href='indexData.php?page={$nextpage}'>下一页</a> | ";
echo "<a href='indexData.php?page=$allpage'>末页</a></center>";

echo "<center>当前页数：".$page." / ".ceil($all/$lenght)." 页<br/>";
echo "总的数据条目是：".$all." 条<br/><center>";

?>
    </div>
</body>
</html>



